<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>오설록 모바일</title>
	<? include "../inc/head.html" ?>
</head>

<body>
<div id="wrapper">

<div id="wrap">
	<? include "../inc/header.html" ?>
	<!-- visual:S -->
	<div id="visualWarp">
		<div id="visual">
			<ul>
				<li><img src="../imgs/@temp.jpg" alt=""></li>
				<li><img src="../imgs/@temp1.jpg" alt=""></li>
				<li><img src="../imgs/@temp2.jpg" alt=""></li>
			</ul>	
		</div>
		<nav class="page">
			<button class="control sliderPrev" onclick="slider.prev();return false;">PREV</button>
			<button class="control sliderNext" onclick="slider.next();return false;">NEXT</button>
			<p class="navLength"></p>
		</nav>
	</div>
	<!-- weather -->
	<div id="myTea">
		<div class="myLevel">
			<p class="lv"><span>나의오설록</span><img src="../imgs/level01.gif" alt=""></p>
			<p class="banner"><span>오설록 특가 ZONE</span><img src="../imgs/saleZone.gif" alt=""></p>
		</div>
		<section class="util">
			<!-- 오늘의 추천 차 -->
			<article id="weather">
				<div class="result">
					<h1>오늘의 추천차</h1>
					<!-- login:Before 
					<p class="weatherTxt">오늘 날씨에 어울리는<br/> 오늘의 오설록 추천 차 입니다.</p>-->
					<!-- login:After -->
					<p class="weatherTxt">오늘 날씨에 <strong>'홍길동'</strong>고객님에게<br/> 어울리는 오늘의 추천 차입니다.</p>
					<p class="state">(30대 / 남성)</p>
					<div class="wAPI">weather api 들어가는 부분</div>
				</div>
				<div class="todayTea">
					<p class="thumb"><img src="../imgs/todayTea.jpg" alt="오늘의 추천차"></p>
					<p class="teaName">오설록 메밀차</p>
				</div>
			</article>
			<ul>
				<li class="nav01"><span class="arr"><img src="../imgs/myNavi_arr.gif" alt=""></span><a href="#" class="on"><span>커뮤니티</span></a></li>
				<li class="nav02"><a href="#"><span>큐레이션</span></a></li>
				<li class="nav03"><a href="#"><span>출석체크</span></a></li>
				<li class="nav04"><a href="#"><span>티카운셀러</span></a></li>
			</ul>
		</section>
	</div>
	<!-- Best Product -->
	<section id="prdBest" class="bestLayout">
		<h2>오설록 베스트 상품</h2>
		<div id="prdSlider">
			<ul>
				<!-- prd loos:S -->
				<li class="prdScope">
					<div class="prd">
						<p class="thumb">
							<!-- label -->
							<span class="label"><img src="../imgs/leabelRed01.png" alt="1st"></span>
							<a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a>
						</p>	
						<p class="prdName ellipsis">오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><span class="label"><img src="../imgs/leabelRed02.png" alt="2st"></span><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><span class="label"><img src="../imgs/leabelRed03.png" alt="3st"></span><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>					
				</li>

				<li class="prdScope">
					<div class="prd">
						<p class="thumb"><img src="../imgs/@tempPrd.jpg" alt="1st"></p>	
						<p class="prdName ellipsis">11오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">11오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">111111오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>					
				</li>

				<li class="prdScope">
					<div class="prd">
						<p class="thumb"><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">22222오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">22222오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>

					<div class="prd">
						<p class="thumb"><a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a></p>	
						<p class="prdName ellipsis">2222오설록 발효차</p>
						<p class="price">18,000원</p>
					</div>					
				</li>
			</ul>
		</div>
		<nav class="page">
			<button class="control sliderPrev" onclick="prdSlider.prev();return false;">PREV</button>
			<button class="control sliderNext" onclick="prdSlider.next();return false;">NEXT</button>
			<p class="navLength"></p>
		</nav>
	</section>
	<!-- tHouseBest Product -->
	<section id="tHouseBest" class="bestLayout">
		<h2>티하우스 베스트 상품</h2>
		<ul>
			<li class="prd">
				<p class="thumb">
					<!-- label -->
					<span class="label"><img src="../imgs/leabelGreen01.png" alt="1st"></span>
					<a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a>
				</p>	
				<p class="prdName ellipsis">오설록 발효차</p>
				<p class="price">18,000원</p>
				<div class="review">제주 삼나무의 그윽한 풍미에 제주영귤의 상큼 함을 더한 후발효차를 이용한 티에이드 음료</div>
			</li>
			<li class="prd">
				<p class="thumb">
					<!-- label -->
					<span class="label"><img src="../imgs/leabelGreen02.png" alt="2st"></span>
					<a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a>
				</p>	
				<p class="prdName ellipsis">오설록 발효차</p>
				<p class="price">18,000원</p>
				<div class="review">제주 삼나무의 그윽한 풍미에 제주영귤의 상큼 함을 더한 후발효차를 이용한 티에이드 음료</div>
			</li>
			<li class="prd">
				<p class="thumb">
					<!-- label -->
					<span class="label"><img src="../imgs/leabelGreen03.png" alt="3st"></span>
					<a href="#"><img src="../imgs/@tempPrd.jpg" alt=""></a>
				</p>	
				<p class="prdName ellipsis">오설록 발효차</p>
				<p class="price">18,000원</p>
				<div class="review">제주 삼나무의 그윽한 풍미에 제주영귤의 상큼 함을 더한 후발효차를 이용한 티에이드 음료</div>
			</li>
		</ul>
	</section>	
	<section id="snsBanner">
		<h2>오설록 SNS</h2>
		<ul>
			<li class="n1"><a href="#"><img src="../imgs/sns_fb.gif" alt="Osulloc Facebook"></a></li>
			<li class="n2"><a href="#"><img src="../imgs/sns_youtube.gif" alt="Osulloc Youtube"></a></li>
			<li class="n3"><a href="#"><img src="../imgs/sns_gift.gif" alt="Osulloc Gifticon"></a></li>
			<li class="n4"><a href="#"><img src="../imgs/sns_emart.gif" alt="Osulloc EmartMall"></a></li>
		</ul>
	</section>
	<? include "../inc/footer.html" ?>
</div>
<!-- ProductNavi -->
<? include "../inc/aside.html" ?>
</div>
<script>
// Slider UI
var slider = new Swipe(document.getElementById('visual'),{
	//auto: 1000,
	callback: function(e, pos){
		$("#visualWarp .navLength button").removeClass("activeSlide").eq(e).addClass("activeSlide");
	}
});
// Slider Button Action
function moveVisual(e){
	slider.slide(e, 300);
};

// Product Slider

var prdSlider = new Swipe(document.getElementById('prdSlider'),{
	callback: function(e, pos){
		$("#prdBest .navLength button").removeClass("activeSlide").eq(e).addClass("activeSlide");
	}
});

function movePrd(e){
	prdSlider.slide(e, 300);
};



// Navi 커뮤티/큐레이션/출석/카운셀러
$("#myTea ul li").click(function(){
	var idx = $("#myTea ul li").index(this);
	$("#myTea ul li a").removeClass("on").eq(idx).addClass("on");
	$("#myTea ul li span.arr").remove();
	$(this).prepend("<span class='arr'><img src='../imgs/myNavi_arr.gif' alt=''>");
	return false;
});	


</script>
</body>
</html>






